bs-grid2

intermediate · 难度：高级 · +10XP

Bootstrap 栅格系统详解

Bootstrap 的栅格系统是响应式布局的核心工具。它将页面划分为最多 12 列，通过行（row）和列（col）的组合，可以轻松创建各种复杂的页面布局。无论是简单的两栏布局，还是复杂的多栏嵌套，栅格系统都能完美胜任。

栅格系统的基本结构

栅格系统采用容器 → 行 → 列的三层结构。容器（.container 或 .container-fluid）是最外层包裹，行（.row）用来创建水平列组，列（.col）则是内容的载体。每一行中的列数加起来应该等于 12。

<div class="container">
  <div class="row">
    <div class="col-4">左侧栏</div>
    <div class="col-8">右侧栏</div>
  </div>
</div>

响应式断点（Breakpoints）

Bootstrap 提供了五个响应式断点，对应不同屏幕尺寸。通过给列添加断点前缀，可以让同一页面在不同设备上呈现不同布局。

断点前缀	屏幕最小宽度	适用设备
.col-	< 576px	超小屏幕（手机竖屏）
.col-sm-	≥ 576px	小屏幕（手机横屏）
.col-md-	≥ 768px	中等屏幕（平板）
.col-lg-	≥ 992px	大屏幕（笔记本）
.col-xl-	≥ 1200px	超大屏幕（台式机）
.col-xxl-	≥ 1400px	超大桌面

列的偏移与对齐

除了基本的列宽设置，栅格系统还支持列的偏移（offset）和对齐（align）。使用 .offset-md-* 可以将列向右偏移指定数量，使用 .justify-content-* 可以控制列在水平方向的对齐方式，使用 .align-items-* 可以控制垂直方向的对齐。

<div class="row justify-content-center align-items-center">
  <div class="col-md-4 offset-md-2">偏移且居中的列</div>
  <div class="col-md-4">普通列</div>
</div>

嵌套栅格

你可以在一列内部再次使用 .row 来创建嵌套的栅格，这样可以实现更加复杂的布局结构。嵌套的行同样遵循12列原则，但其宽度是相对于父列的宽度而言的。

1. 创建一个 .container 容器，在其中添加 .row
2. 在 row 中创建两个列：.col-md-6 和 .col-md-6
3. 将第二个列改为 .col-md-4，调整布局看看效果
4. 尝试使用 .col-sm-12 .col-md-6 .col-lg-4 创建满足多设备响应的三列卡片布局
5. 用嵌套栅格实现一个「左侧文章 + 右侧两行」的布局结构